<!DOCTYPE html>
<html ng-app="app" lang="en">
    <head>
        <meta charset="UTF-8">
        <title ng-bind="title"></title>
        <link rel="stylesheet" href="../../style/css/bootstrap.css">
        <link rel="stylesheet" href="../../style/css/matrix-style.css">
        <link rel="stylesheet" href="../loader/loader.css">
        <link rel="stylesheet" href="../checkbox/checkbox.css">
        <link rel="stylesheet" href="../select/select.css">
        <link rel="stylesheet" href="../datepicker/datepicker.css">
        <link rel="stylesheet" href="../tooltip/tooltip.css">
        <link rel="stylesheet" href="../field/field.css">
        <script src="../../../node_modules/angular/angular.js"></script>
        <script src="../../a.ui.js"></script>
        <script src="../i18n/angular-locale_zh-cn.js"></script>
        <script src="../common/is-class.js"></script>
        <script src="../common/dateparser.js"></script>
        <script src="../common/position.js"></script>
        <script src="../common/stacked-map.js"></script>
        <script src="../tooltip/tooltip.js"></script>
        <script src="../field/field.label.js"></script>
        <script src="../field/xtype/text.js"></script>
        <script src="../field/xtype/number.js"></script>
        <script src="../common/store.js"></script>
        <script src="../common/outside-click.js"></script>
        <script src="../loader/loader.js"></script>
        <script src="../radio/radio.js"></script>
        <script src="../radio/radio-group.js"></script>
        <script src="../field/xtype/radio.js"></script>
        <script src="../checkbox/checkbox.js"></script>
        <script src="../checkbox/checkbox-group.js"></script>
        <script src="../field/xtype/checkbox.js"></script>
        <script src="../select/select.js"></script>
        <script src="../field/xtype/combobox.js"></script>
        <script src="../datepicker/datepicker.js"></script>
        <script src="../field/xtype/date.js"></script>
        <script src="../field/xtype/file.js"></script>
        <script src="../field/field.js"></script>
        <script src="form.js"></script>
        <script>
            // bootstrap app
            var app = angular.module('app', ['a.ui']);
            app.run(function ($rootScope, $timeout) {
                $rootScope.title = 'Form';
                $rootScope.option = {
                    api      : './form.demo.json',
                    fields   : [{
                        label     : '用户昵称',
                        name      : 'nickname',
                        type      : 'text',
                        allowBlank: false,
                        message   : {
                            minlength: 2,
                            maxlength: 12
                        }
                    }, {
                        label  : '密码',
                        name   : 'pass',
                        type   : 'password',
                        message: {
                            required : true,
                            minlength: 6,
                            maxlength: 12
                        }
                    }, {
                        label  : '年龄',
                        name   : 'age',
                        type   : 'number',
                        message: {
                            required: true,
                            min     : {
                                value: 0,
                                msg  : '必须大于0'
                            },
                            max     : 200
                        }
                    }, {
                        label     : '邮箱',
                        name      : 'email',
                        vtype     : 'email',
                        allowBlank: false
                    }, {
                        label     : '个人网站',
                        name      : 'website',
                        vtype     : 'url',
                        allowBlank: false
                    }, {
                        label      : '职业',
                        name       : 'profession',
                        type       : 'radio',
                        api        : '../radio/professions.json',
                        displyField: 'name',
                        valueField : 'value',
                        allowBlank : false
                    }, {
                        label      : '爱好',
                        name       : 'hobby',
                        type       : 'checkbox',
                        api        : '../checkbox/checkbox-group.demo.json',
                        displyField: 'name',
                        valueField : 'value',
                        allowBlank : false
                    }, {
                        label      : '科目',
                        name       : 'subject',
                        type       : 'combobox',
                        api        : '../select/select.demo.json',
                        displyField: 'name',
                        valueField : 'id',
                        allowBlank : false
                    }, {
                        label      : '生日',
                        name       : 'birth',
                        type       : 'year',
                        allowBlank : false
                    }, {
                        label      : '照片',
                        name       : 'photo',
                        type       : 'file',
                        allowBlank : false
                    }],
                    listeners: {
                        before: function (formData) {
                            console.log('before', formData);
//                            return false;
                        },
                        after : function () {
                            console.log('after');
                        }
                    }
                };
            })
        </script>
    </head>
    <body>
        <div class="container">
            <div class="col-md-6 col-md-offset-3">
                <div class="widget-box">
                    <div class="widget-title">
                        <span class="icon"> <i class="glyphicon glyphicon-align-justify"></i> </span>
                        <h5>asdasd</h5>
                        <span class="icon pull-right "> <i class="glyphicon glyphicon-remove"></i> </span>
                    </div>
                    <div class="widget-content">
                        <!-- Form -->
                        <a-form name="myForm" option="option"></a-form>
                        <!-- Form End -->
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>